<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <form>
            类别 : <select name="category_id" v-model="goodsVo.category_id">
                <option v-for="(category,index) in classesList" :value="category.id" >{{category.name}}</option>
            </select>
            品牌 : <select name="brand_id" v-model="goodsVo.brand_id">
                <option v-for="(brand,index) in brandList" :value="brand.id" >{{brand.name}}</option>
            </select>
            商品名 : <input type="text" v-model="goodsVo.name">
            价格 : <input type="text" v-model="goodsVo.startAge"> -
            <input type="text" v-model="goodsVo.endAge">
            <input type="button" value="查询" @click="condition(1)">
        </form>
        <table border="1">
            <tr>
                <td>ID</td>
                <td>名称</td>
                <td>类别</td>
                <td>品牌</td>
                <td>价格</td>
                <td>库存</td>
                <td>时间</td>
                <td>介绍</td>
                <td>操作</td>
            </tr>
            <tr v-for="(goods,index) in pageInfo.list">
                <td>{{goods.id}} </td>
                <td>{{goods.name}} </td>
                <td>{{goods.category.name}} </td>
                <td>{{goods.brand.name}} </td>
                <td>{{goods.price}} </td>
                <td>{{goods.store_num}} </td>
                <td>{{goods.create_time}} </td>
                <td>{{goods.introduction}} </td>
                <td>
                    <a :href="'goods_edit.html?id=' + goods.id">修改</a>

                </td>
            </tr>
        </table>

        <!--分页-->
        当前第{{pageInfo.pageNum}}页,共{{pageInfo.pages}}页
        <a href="" v-for="(num,index) in pageInfo.pages" @click.prevent="condition(num)">{{num}} </a>

    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data: {
            pageInfo: { //分页数据
                pageSize: 2,
                pageNum: 1

            },
            goodsVo: {

            }

        },
        methods: {
            selectAllClasses() {
                //ajax查询
                var url = "http://localhost:8080/category"
                axios.get(url)
                    .then(res => {
                        //成功
                        //获得查询结果
                        var baseResult = res.data
                        if (baseResult.code == 1) {
                            //成功
                            this.classesList = baseResult.data
                        } else {
                            //失败
                            alert(baseResult.message)
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            selectAllBrand() {
                //ajax查询
                var url = "http://localhost:8080/brand"
                axios.get(url)
                    .then(res => {
                        //成功
                        //获得查询结果
                        var baseResult = res.data
                        if (baseResult.code == 1) {
                            //成功
                            this.brandList = baseResult.data
                        } else {
                            //失败
                            alert(baseResult.message)
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            condition(pageNum) {
                if (pageNum) {
                    this.pageInfo.pageNum = pageNum
                }
                var url = `http://localhost:8080/goods/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`
                axios.post(url, this.goodsVo)
                    .then(res => {
                        //处理数据
                        var baseResult = res.data

                        //判断
                        if (baseResult.code == 1) {
                            //成功
                            this.pageInfo = baseResult.data
                        } else {
                            //失败
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            }
        },
        created() {
            //条件查询
            this.condition()
            //查询所有
            this.selectAllClasses()
            //查询所有品牌
            this.selectAllBrand()
        }
    })
</script>